<script setup>
import { useProjectDetail } from 'api/project';
import { onMounted, ref, computed, watch, watchEffect, reactive, nextTick, onUpdated } from 'vue';
import { useRouter, useRoute } from 'vue-router';
//初始化
import useSearchProjecValue from "../hooks/useSearchProjecValue";
import Card from '../components/Card.vue';
import Loading from '../components/Loading.vue';
import useLoadData from '../hooks/useLoadData';
import { getMemberList, manager,member } from '../api/member';
import Developing from '../components/Developing.vue';
import Task from './Task.vue';
const route = useRoute()
const router = useRouter()
const { statusOption, typeOption } = useSearchProjecValue()
const request =	manager(route.params.pid).then(res => {
		isManager.value = res.data
		return useProjectDetail(route.params.pid)
	})
const { isError, isLoading, data: info } = useLoadData(request)
const isManager = ref(false)
const isMember = ref(false)
const tabs = ref(null)
onMounted(() => {
	isManagerF()
	isMemberF()
})
onUpdated(()=>{
	
})

//获取是否是管理员
const isManagerF = () => {
	manager(route.params.pid).then(res => {
		isManager.value = res.data
	})
}
const isMemberF = () => {
	member(route.params.pid).then(res => {
		isMember.value = res.data
	})
}

//获取项目基本信息

const getStatusText = computed(() => info.value.status != undefined ? statusOption.find(x => x.value == info.value.status).text : '')
const getTypeText = computed((() => info.value.status != undefined ? typeOption.find(x => x.value == info.value.type).text : ''))
//获取项目计划

//处理点击事件
const renderTab = (name, title) => {
	if (title === "成员") {
		loadMembers()
	}
}

//获取项目成员
const members = ref(null)
const loadMembers = () => {

	getMemberList(route.params.pid).then(res => {
		if (res.code = 200) {
			members.value = res.data
		}
	})
}
//获取项目问答

//获取项目日志

//获取项目在招

//判断项目是否已经收藏

//收藏项目

//举报项目

//页面跳转
//渲染职位标签
const memberLink = (uid) => {
	router.push("/user/" + uid)
}
const position = reactive(["成员", "管理员", "创建者"])
</script>
<template>
	<Loading :is-error="isError" :is-loading="isLoading">
		<div id="bj" >
			<!-- 设定div布局方式为flex -->
			<Card class="top" >
				<div class="header">
					<!-- 头部 -->
					<div style="display: flex;">
						<div class="title">{{ info.name }}</div>
					</div>
					<div class="tb">
						<img class="icon" src="../assets/NotCollected.svg" />
						<img class="icon" src="../assets/report.svg" />
					</div>
				</div>
				<div class="school">
					<img class="icon" src="../assets/school.svg" style="margin-left: 0px;" />
					{{ info.school }}
				</div>
				<div class="bq">
					<div>
						<van-tag v-for="item, index in info.tags.split(' ')" color="var(--light-color)">{{ item }}</van-tag>
					</div>
				</div>
				<div class="bottom" ref="tabss">
					<div class="left">
						<van-tag class="status" size="medium" plain color="var(--second-color)">{{ getStatusText }}</van-tag>
						<van-tag class="type" size="medium" plain color="var(--main-color)">{{ getTypeText }}</van-tag>
					</div>
					<router-link :to="'/user/' + info.creator_uid" class="fbr">
						<div class="creator-name">{{ info.creator_name }}</div>
						<van-image round width="25" height="25" fit="cover" :src="info.creator_avatar" />
					</router-link>
				</div>
			</Card>
			<div class="main-tabs">
				<van-tabs 
					swipeable
					@rendered="renderTab"
					ref="tabs"
					>
					<van-tab title="设置" class="tab" v-if="isManager">
						<van-cell-group inset>
							<van-cell title="修改项目信息" icon="orders-o" is-link :to="'/project/update/' + info.pid" />
							<van-cell title="项目成员管理" icon="friends-o" is-link :to="'/project/member/' + info.pid" />
							<van-cell title="项目招募管理" icon="flag-o" is-link :to="'/project/recruit/' + info.pid" />
							<van-cell title="申请管理" icon="records" is-link :to="'/project/apply/' + info.pid" />
							<van-cell title="报名参赛" icon="records" is-link :to="`/project/${info.pid}/applyCompetition`" />
						</van-cell-group>
					</van-tab>
					<van-tab title="介绍" class="tab">
						<Card>{{ info.introduce }}</Card>
					</van-tab>
					<van-tab v-if="isMember" title="任务" class="tab">
						<Task :tasks="info.plans"></Task>
					</van-tab>
					<van-tab title="成员" class="tab">
						<Card class="member-card" v-for="item, index in members" @click="memberLink(item.uid)">
							<div class="card-left">
								<van-image fit="cover" round width="25" height="25" :src="item.avatar" />
								<div class="member-name">{{ item.name }}</div>
								<van-tag
									v-if="item.is_manager > 0"
									:color="item.is_manager === 2 ? 'var(--main-color)' : 'var(--second-color)'"
									plain
									size="mini"
									class="card-right"
								>{{ position[item.is_manager] }}</van-tag>
							</div>
							<van-tag color="var(--main-color)" size="large" class="card-right">{{ item.position }}</van-tag>
						</Card>
					</van-tab>
					<van-tab v-if="info.logs" title="日志" class="tab">
						<Card>
							<div v-for="item in info.logs.split('+').reverse()" class="log">
								<van-tag plain color="var(--second-color)">{{ item.split(' ')[0] }} {{ item.split(' ')[1] }}</van-tag>
								<van-tag
									size="medium"
									color="var(--main-color)"
								>{{ item.split(' ')[2] }} {{ item.split(' ')[3] }}</van-tag>
							</div>
						</Card>
					</van-tab>
				</van-tabs>
			</div>
		</div>
	</Loading>
</template>
<style scoped>
#bj {
	background: var(--main-background-color);
	min-height: 100%;
}
.top {
	background: white;
	padding: 15px;
	margin: 20px 0;
}
.header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 3px;
}
.title {
	font-weight: bold;
	font-size: 15px;
}
.van-tag {
	margin: 5px 0px;
	margin-right: 5px;
}

.icon {
	height: 20px;
	margin: 0px 5px;
}

.tb {
	display: flex;
	/* justify-content: center; */
	align-items: center;
}

.school {
	display: flex;
	align-items: center;
	font-size: 10px;
}
.creator-name {
	margin-right: 10px;
	font-size: 10px;
	color: var(--font-gray-color);
}
.tb img {
	padding-left: 5px;
}

.bq {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
	color: #888;
}
.bottom {
	display: flex;
	justify-content: space-between;
}

.fbr {
	display: flex;
	align-items: center;
}

.van-cell-group div {
	display: flex;
	align-items: center;
}
.main-tabs :deep(.van-cell-group--inset) {
	margin: 0px;

}
.main-tabs :deep(.van-swipe) {
	cursor: auto;
}
.van-tabs__nav{
	border-radius: 20px;
}
.tab {
	padding: 20px;
}
.log {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.member-card {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}
.card-left {
	display: flex;
	align-items: center;
}
.member-name {
	margin: 0 10px;
}
</style>
